import React from 'react'
import { Card, Divider } from 'antd-mobile'
import TabBar1 from '../../components/TabBar/TabBar'
export default function AccumulatedConsumption() {
  let list = [
    { name: '下单消费20', day: '2024-3-12 10:00:00', res: '-20' },
    { name: '下单消费20', day: '2024-3-12 10:00:00', res: '-20' },
    { name: '下单消费20', day: '2024-3-12 10:00:00', res: '-20' },
    { name: '下单消费20', day: '2024-3-12 10:00:00', res: '-20' },
    { name: '下单消费20', day: '2024-3-12 10:00:00', res: '-20' },
    { name: '下单消费20', day: '2024-3-12 10:00:00', res: '-20' },
  ]
  return (
    <div style={{ background: 'linear-gradient(to bottom, rgb(255,102,0), rgb(246,246,246))', }}>
      {/* 顶部 */}
      <div style={{ padding: '6% 0', textAlign: 'center', color: 'white', fontSize: 'large', fontWeight: 'bold' }}>累积消费</div>
      {/* 时间选择 */}
      <div>
        <div style={{marginLeft:'3%',fontWeight:'bold',fontSize:'large'}} >2024年3月</div>
      </div>
      {/* 记录卡片 */}
      <Card title='&nbsp;消费记录' style={{ margin: '2% auto', width: '90%', }}>
        {list.map((item, index) => {
          return (
            <div key={index}>
              <div style={{ display: 'flex', justifyContent: "space-between" }}>
                <div>
                  <div>{item.name}</div>
                  <div style={{ marginTop: '8%', fontSize: 'small', color: 'rgb(153,153,153)' }}>{item.day}</div>
                </div>
                <div style={{ marginTop: '4%', color: 'rgb(255,102,0)', marginRight: '4%', }}>{item.res}</div>
              </div>
              <Divider style={{ borderColor: 'rgb(216,216,216)', }} />
            </div>
          )
        })}
      </Card>
      <TabBar1></TabBar1>
    </div>
  )
}
